<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>小球</title>
</head>
<body>
<canvas id="canvas" width="1024" height="768" style="border: 1px solid #aaa; display: block; margin: auto auto">
  <!--兼容降错-->
  当前浏览器不支持 Canvas，请更换浏览器后再试
</canvas>

<script>
  // 初始化小球
  const ball = { x: 512, y: 100, r: 20, g: 2, vx: -4, vy: 0, color: '#005588' }
  window.onload = function() {
    const canvas = document.getElementById('canvas')
    // 绘图上下文环境 2D 绘图
    const context = canvas.getContext('2d')

    // 定时器动画
    setInterval(() => {
      // 渲染
      render(context)
      // 更新
      update()
    }, 50)
  }
  // 动画
  function update() {
    ball.x += ball.vx
    ball.y += ball.vy
    ball.vy += ball.g

    // 碰撞底部
    if (ball.y >= 768 - ball.r) {
      ball.y = 768 - ball.r
      ball.vy = -ball.vy*0.6	// 摩擦力
    }
  }
  function render(ctx) {
    // 刷新 canvas 画布
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
    ctx.fillStyle = ball.color
    ctx.beginPath()
    ctx.arc(ball.x, ball.y, ball.r, 0, 2*Math.PI)
    ctx.closePath()
    ctx.fill()
  }
</script>
</body>
</html>
